<script setup lang="ts">
import {inject, computed, h} from "vue";
import sysModelContent from './components/systemSource/sysModelContent.vue';
import sysPanelContent from './components/systemSource/sysPanelContent.vue';
import sysDOMContent from './components/systemSource/sysDOMContent.vue';
import myModelContent from './components/mySource/myModelContent.vue';
import myPanelContent from './components/mySource/myPanelContent.vue';
import myConfigurationContent from './components/mySource/myConfigurationContent.vue';
import myImageContent from './components/mySource/myImageContent.vue';
import {Ref} from "@vue/runtime-dom";

/*// 注入共享状态
const topLabels = inject<{ label: string; subItems: any[] }[]>('topLabels')!;
const selectedTopLabelIndex = inject<Ref<number>>('selectedTopLabelIndex')!;
const selectedSubItemIndex = inject<Ref<number>>('selectedSubItemIndex')!;


// 根据选中顶部标签计算要显示的子菜单项
const currentSubItems = computed(() => {
  return topLabels[selectedTopLabelIndex.value].subItems;
});
//根据选中子菜单项计算要显示的组件
const currentComponent = computed(() => {
  console.log(selectedSubItemIndex.value,555555555)
  if (currentSubItems.value && currentSubItems.value.length > 0) {
    return currentSubItems[selectedSubItemIndex.value].component;
  }
  return 'No Content Available';
});*/


defineProps<{
  currentComponent: string;
}>();
// 解析组件名称并返回相应的组件
const resolveComponent = (componentName: string) => {
  console.log(componentName)
  switch (componentName) {
    case 'sysModelContent': return sysModelContent;
    case 'sysPanelContent': return sysPanelContent;
    case 'sysDOMContent': return sysDOMContent;
    case 'myModelContent': return myModelContent;
    case 'myPanelContent': return myPanelContent;
    case 'myConfigurationContent': return myConfigurationContent;
    case 'myImageContent': return myImageContent;
    //default: return () => h('div', 'No Content Available');
  }
};

</script>

<template>
  <main class="content" style="width: 14vw">
    <component :is="resolveComponent(currentComponent)" />
  </main>
</template>

<style scoped>

</style>